<template>
  <div class="content">
  <NavBar :tabsData="tabsData"></NavBar>
<!--    需要列表无限滚动的有咩那，就不要最外层容器的滚动了-->
  <div :class="route.name==='artist'?'content-view no-scroll':'content-view'">
    <el-backtop/>
    <router-view></router-view></div>
  </div>

</template>

<script lang="ts" setup>
import NavBar from "@/components/NavBar/index.vue";
import {ref, reactive} from "vue"
import {useRoute} from 'vue-router'
const route =useRoute()
const tabsData = reactive([{
  label:'个性推荐',
  value:'recommend',
},{
      label:'歌单',
      value:'songListIndex',
    },{
      label:'排行榜',
      value:'ranking',
    },{
      label: '歌手',
      value: 'artist',
    },
    ]
)

</script>

<style scoped lang="less">
//最外层容器不要滚动的页面样式
.no-scroll{
  height: auto!important;
  overflow-y: auto;
  padding-right: 0;
}
</style>
